<template>
  <div class="search">
    <div class="search-title">
        <input type="text" name="" placeholder="请输入搜索内容" v-model="searchContent">
        <button type="button" name="button" @click="searchHandler">搜索</button>
    </div>
    <ul class="list searchlist">
      <router-link  class="song" tag="li" v-for="(item,index) in songList" :key="index" :to="{name: 'musicPlay', params: { songId: item.songid }}">
        <div class="left">
          <div class="info single-line">
            <div>
              <span>{{ item.songname }}</span>
            </div>
              <span class="txt">{{ item.artistname }} </span>
          </div>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: "search",
  data() {
    return {
      searchContent: '',
      songList: []
    }
  },
  methods: {
    searchHandler() {
      const searchUrl = 'baidu_music_api/v1/restserver/ting?method=baidu.ting.search.catalogSug&query='+this.searchContent
      this.$axios.get(searchUrl)
      .then(res => {
        if(res.data.error_code == 22001) {
          alert('搜索的内容不存在')
          return ;
        }
        this.songList = res.data.song
      })
      .catch(err => {
        consoe.log('请求失败' + err)
      })
    }
  }
}
</script>

<style scoped>
.search-title{
  padding: 20px;
  overflow: hidden;
}

input{
  width: 80%;
  height: 30px;
  line-height: 30px;
  background: #fff;
  border: 1px solid #f1f2f3;
  padding-left: 10px;
  float: left;
  display: inline-block;
}

button{
  float: left;
  width: 15%;
  height: 30px;
}
.list {
  word-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  word-break: break-all;
  border-bottom: 1px solid #e5e5e5;
  border-top: 1px solid #e5e5e5;
}

.list li.song {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  min-height: 55px;
  text-align: left;
}

li{
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  min-height: 50px;
  border-bottom: 1px solid #F2F2F2;
  padding-left: 10px;
}

.list .item.song .left, .list li.song .left {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list .item .info, .list li .info {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list li .info>span {
  font-weight: 400;
  display: block;
  font-size: 12px;
  color: #999;
}
</style>
